<template>
  <el-scrollbar
    v-loading="isLoading"
    max-height="100%"
  >
    <el-descriptions
      v-for="(item, index) in entityChangeList"
      :key="index"
      :column="2"
      border
      size="small"
    >
      <el-descriptions-item
        :span="2"
        label="ID"

        width="150px"
      >
        {{ item.id }}
      </el-descriptions-item>
      <el-descriptions-item
        label="类型"
      >
        {{ EntityLogEnum[item.changeType] }}
      </el-descriptions-item>
      <el-descriptions-item
        label="时间"
      >
        {{ parseDate2Str(item.changeTime, 'YYYY-MM-DD HH:mm:ss') }}
      </el-descriptions-item>
      <el-descriptions-item
        label="EntityId"
      >
        {{ item.entityId }}
      </el-descriptions-item>
      <el-descriptions-item
        label="EntityTypeFullName"
      >
        {{ item.entityTypeFullName }}
      </el-descriptions-item>
      <el-descriptions-item label="操作">
        <el-button
          text
          type="primary"
          @click="getDetail(item)"
        >
          查看详情
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
    <el-empty
      v-if="!entityChangeList.length"
      :image-size="100"
    />
    <EntityChangeDetail
      v-model="visible"
      v-model:entityChangeId="entityChangeId"
      :append-to-body="true"
      size="40%"
    />
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { parseDate2Str } from '@/utils/timeUtils'
import EntityChangeDetail from './EntityChangeDetail.vue'
import { IEntityChangeLog, EntityLogEnum } from '@/http/types/entityChangeLog'
import { getEntityChangeLog } from '@/http/entityChangeLog'

const props = defineProps({
  auditLogId: {
    type: String,
    default: ''
  }
})

const visible = ref(false)
const isLoading = ref(false)
const entityChangeId = ref('')

const entityChangeList = ref<IEntityChangeLog[]>([])

onMounted(() => {
  init()
})

const init = async () => {
  isLoading.value = true
  const res = await getEntityChangeLog(1, 1000, {
    auditLogId: props.auditLogId,
    changeType: ''
  }).finally(() => {
    isLoading.value = false
  })
  entityChangeList.value = res.items
}

const getDetail = (detail: IEntityChangeLog) => {
  entityChangeId.value = detail.id
  visible.value = true
}
</script>

<style lang="scss" scoped>
</style>
